import React, {FC} from 'react';
import "./index.less";
import HxCyCard from "@/components/HxCyCard";
import {ReloadOutlined} from "@ant-design/icons";
import {HxArticleNormalItem} from '@/components/HxArticleItem';
import {useRequest} from "ahooks";
import * as API from "@/services";
import {Spin} from "antd";
import {useHashScroll} from "react-hash-scroll";
import {queryFrontChiefSelecteds} from "@/services";
import {FormattedMessage} from "@@/exports";


interface EditorsPicksProps {
}

const EditorsPicks: FC<EditorsPicksProps> = (props) => {
  //确保当前组件能通过hash定位
  const scrollRef = useHashScroll<HTMLDivElement>("#anchor_hx_cy_card", {
    position: "start",
    behavior: "smooth"
  });

  const dataReq = useRequest((p) => API.queryFrontChiefSelecteds({
    page: 1,
    ...p,
    pageSize: 6
  }));

  return (
    <HxCyCard
      ref={scrollRef}
      title={"主编精选"}
      subtext={"Editor's Picks"}
      className={"editors-picks-list-card"}
      extra={
        <a className={"cy-card-more-btn"} onClick={(e) => {
          e.preventDefault();
          const currPage = dataReq.data?.page;   //当前是第几页
          const currTotalPageNum = dataReq.data?.totalPageNum || 0; //总共有几页

          let randomPage: number | undefined = undefined;
          if (currTotalPageNum === 0) {
            return;
          } else if (currTotalPageNum === 1) {
            if (currPage == 1) {
              return;
            }
            randomPage = 1;    //总页数为1时，直接返回当前页，
          } else if (currTotalPageNum === 2) {
            randomPage = currPage === 1 ? 2 : 1;   //总页数为2时，返回对页（如当前为1，则返回2；当前为2，则返回1）
          } else if (currTotalPageNum > 2) {
            //当总页数大于 2 时，循环生成随机数，直到不等于当前页为止。
            do {
              randomPage = Math.floor(Math.random() * currTotalPageNum) + 1;
            } while (randomPage === currPage);
          }
          dataReq.run({page: randomPage});
        }}><ReloadOutlined/> <FormattedMessage id="text.shuffle"/></a>
      }
    >
      <Spin spinning={dataReq.loading}>
        {
          dataReq.data?.data?.map((item) => {
            item.article.period = {
              ... item.article?.period,
              ...item.period,
            }
            item.article.journal = {
              ... item.article?.journal,
              ...item.journal,
            }
            return (
              <HxArticleNormalItem key={item.id} article={item.article} onArticleChange={(article) => {
                dataReq?.mutate((oldData) => {
                  return {
                    ...oldData,
                    data: oldData!.data.map((item) => {
                      if (item.article.id === article.id) {
                        return {
                          ...item,
                          article
                        }
                      }
                      return item;
                    })
                  } as API.RespPageResult<API.FrontChiefSelected>;
                })
              }}/>
            )
          })
        }
      </Spin>
    </HxCyCard>
  );
};

export default EditorsPicks;
